<script setup>
import {ref, reactive} from 'vue'
import {ElMessage} from 'element-plus'
import router from "@/router/index.js";
import {User, Lock, ChatSquare} from '@element-plus/icons-vue'
import {post} from "@/util/axios.js"
import api from "@/views/Login/api.js";
import Identify from "@/components/Captcha/Identify.vue"
import {captchaCode, generateCode} from '@/components/Captcha/captcha.js'
import VueCookie from "vue-cookie";
import {fetchUser, getUser} from "@/components/userInfo.js";
import backgroundOne from "@/components/background/bg1.vue";

// 表单数据
const form = reactive({
    username: '',
    password: '',
    captcha: captchaCode
})


// 验证规则
const rules = reactive({
    username: [
        {required: true, message: '请输入用户名', trigger: 'blur'}
    ],
    password: [
        {required: true, message: '请输入密码', trigger: 'blur'}
    ],
    captcha: [
        {required: true, message: '请输入验证码', trigger: 'blur'}
    ]
})


// 加载状态

const formObj = ref(null)


// 提交登录
const captchaTest = ref('');
const handleLogin = async () => {
    captchaTest.value = form.captcha.toUpperCase()
    formObj.value.validate((valid) => {
            if (valid) {
                if (captchaTest.value === captchaCode.value) {
                    post(api.login, form, async content => {
                        ElMessage.success("你好，"+ form.username + "！")
                        await VueCookie.set('sessionId', content, {
                            expires: 7
                        });
                        await fetchUser()
                        if (getUser.value.role === 2){
                            await router.push('/sup')
                        }else if (getUser.value.role === 1){
                            await router.push('/mer')
                        }else {
                            await router.push('/user')
                        }
                    })
                    generateCode()

                } else {
                    generateCode()
                    ElMessage.error('验证码错误');
                }
            } else {
                generateCode()
                ElMessage.error('请检查填写信息');
            }
        }
    )
    ;
}


</script>

<template>
    <div class="login-container">
        <backgroundOne/>
        <el-card class="login-box">
            <h2 class="title">欢迎登录剧本杀预约系统</h2>

            <el-form
                    ref="formObj"
                    :model="form"
                    :rules="rules"
                    @keyup.enter="handleLogin">
                <!-- 账号输入 -->
                <el-form-item prop="username">
                    <el-input
                            v-model="form.username"
                            placeholder="请输入用户名"
                            :prefix-icon="User"
                            clearable
                    />
                </el-form-item>

                <!-- 密码输入 -->
                <el-form-item prop="password">
                    <el-input
                            v-model="form.password"
                            placeholder="请输入密码"
                            :prefix-icon="Lock"
                            show-password
                            clearable
                    />
                </el-form-item>

                <!-- 验证码 -->
                <el-form-item prop="captcha">
                    <div class="captcha-wrapper">
                        <el-input
                                v-model="form.captcha"
                                placeholder="请输入验证码"
                                :prefix-icon="ChatSquare"
                                class="captcha-input"
                                clearable/>
                        <Identify class="captcha"/>
                    </div>
                </el-form-item>

                <!-- 登录按钮 -->
                <el-form-item>
                    <el-button
                            type="primary"
                            class="login-btn"
                            @click="handleLogin">
                        立即登录
                    </el-button>
                </el-form-item>
            </el-form>

            <!-- 其他操作 -->
            <div class="operations">
                <div>没有账号？
                    <router-link class="router-link" type="primary" to="/register">立即注册</router-link>
                </div>
                <router-link class="router-link" type="info" to="/forget">忘记密码</router-link>
            </div>
        </el-card>
    </div>
</template>


<style scoped lang="scss">
.router-link {
  color: #6fb6ff;

  &:hover {
    color: #c8e1ff;
  }
}

.captcha {
  height: 40px;
}

.el-input {
  height: 40px;
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  //background: #a4e7ff;
}

.login-box {
  width: 400px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.captcha-wrapper {
  display: flex;
  gap: 10px;
}

.captcha-input {
  flex: 1;
}


.login-btn {
  width: 100%;
  margin-top: 10px;
}

.operations {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
</style>